import { useState } from 'react';
import { DatePicker } from 'antd';
import dayjs from 'dayjs';

const { RangePicker } = DatePicker;

/**
 * 选择日期范围组件
 * @param type 选择类型
 * @param scope 选择范围
 * @param onChange 选择回调
 * @param defaultValue 默认值
 */
const DateScopePicker = ({ type, scope, onChange, defaultValue = null }) => { // 选择周组件
    const [dates, setDates] = useState(null);
    const [value, setValue] = useState(defaultValue);

    const disabledDate = (current) => {
        if (!dates) {
            return false;
        }
        const tooLate = dates[0] && current.diff(dates[0], type) >= scope;
        const tooEarly = dates[1] && dates[1].diff(current, type) >= scope;
        return (current > dayjs().endOf('day')) ||
            !!tooEarly || !!tooLate;
    };
    return (
        <RangePicker
            changeOnBlur
            disabledDate={disabledDate}
            onCalendarChange={(val) => { // 待选日期变化时的回调
                setDates(val);
            }}
            onChange={val => {
                setValue(val);
                onChange && onChange(val, type);
            }}
            onOpenChange={open => { // 弹出日历和关闭日历的回调
                open ? setDates([null, null]) : setDates(null);
            }}
            picker={type === 'days' ? 'date' : type}
            value={dates || value}
        />
    );
};

const SelectTime = () => {
    const handleChange = (val, type) => {
        if (val) {
            if (type === 'week') {
                console.log(val[0].day(1).format('YYYY-MM-DD'), val[1].day(7).format('YYYY-MM-DD'));
                console.log(val[0].week(), val[1].week());
            } else if (type === 'month') {
                console.log(val[0].date(1).format('YYYY-MM-DD'), val[1].add(1, 'month').date(0).format('YYYY-MM-DD'));
            } else if (type === 'days') {
                console.log(val[0].format('YYYY-MM-DD'), val[1].format('YYYY-MM-DD'));
            }
        }
    };
    return (
        <div>
            <div>
                <span className='color-666 m-y-10 m-r-10'>周选择：范围60周、默认20周</span>
                <DateScopePicker
                    defaultValue={[dayjs(), dayjs().subtract(20, 'week')]}
                    onChange={handleChange}
                    scope={60}
                    type='week'
                />
            </div>
            <div className='m-t-10'>
                <span className='color-666 m-y-10 m-r-10'>月选择：范围24个月、默认12个月</span>
                <DateScopePicker
                    defaultValue={[dayjs(), dayjs().subtract(12, 'month')]}
                    onChange={handleChange}
                    scope={24}
                    type='month'
                />
            </div>
            <div className='m-t-10'>
                <span className='color-666 m-y-10 m-r-10'>日选择：范围90天、默认30天</span>
                <DateScopePicker
                    defaultValue={[dayjs(), dayjs().subtract(30, 'days')]}
                    onChange={handleChange}
                    scope={90}
                    type='days'
                />
            </div>
        </div>
    );
};

export default SelectTime;
